import {
  View,
  ViewStyle,
  TouchableOpacity,
  GestureResponderEvent,
  Text,
} from 'react-native';
import {UserToken} from '../../../../db/models/userTokenModel';
import {primaryColor2, secondaryColor} from '../../../../theme/default';
import {TokenLogo} from '../../TokenLogo';
import {useTokenPriceProvider} from '../../../../hooks/useTokenPriceProvider';
import {calTokenValue, formatNumber} from '../../../../utils';
import {useSolanaOwnerTokenAccountsProvider} from '../../../../hooks/useSolana/useSolanaOwnerTokenAccounts';
import {parseValue} from '../../../../utils';
import {PublicKey} from '@solana/web3.js';
import {useSolanaClientProvider} from '../../../../hooks/useSolana/useSolanaClientProvider';
import {useAccountProvider} from '../../../../hooks/useAccountProvider';
import log from '../../../../assets/icons/vUSD_logo(3).svg'

type TokenItemProp = {
  userToken: UserToken;
  customStyle?: ViewStyle;
  onPress?: (event: GestureResponderEvent) => void;
};
const chuanzhi = (data: string) => {
  console.log(data);
};
export function TokenItem({
  userToken,
  customStyle,
  onPress,
}: Readonly<TokenItemProp>) {
  const {tokenPrices} = useTokenPriceProvider();
  
  const handleTokenValue = () => {
    const tokenPrice = tokenPrices.find(item => {
      return item.symbol.toLowerCase() == userToken.symbol.toLowerCase();
    });
    if (tokenPrice) {
      return calTokenValue(userToken.uiAmount!, tokenPrice.price, 4);
    } else {
      return 'SGD 0.00';
    }
  };



    const {solanaClient, chainId} = useSolanaClientProvider();
    const {userInfo} = useAccountProvider();
  
  const address = new PublicKey(userInfo!.solanaAddress);
 
 
  const balance =  solanaClient!.getBalance(address);
      const uiBalance = parseValue(balance.toString(), 9);
      const userTokens =[]

      const aaa={
          name: 'Vusd',
          symbol: 'SOL',
          decimals: 10,
          logo: log,
          type: 'native',
          amount: balance + '',
          uiAmount: uiBalance.toString(),
          address: '',
          owner: userInfo!.solanaAddress,
          chainId: chainId,
      }
  userTokens.push(aaa)
  userTokens.push(userToken)
      console.log('数组数组：',userTokens)
      // 假设只显示前两个项目
// let count = 0;
// userTokens.some((item) => {
//     console.log(`停止`);
//     count += 1;
//     return count >= 2; // 当计数器达到指定数量时返回true从而跳出循环
// });
  return ( 
    // <TouchableOpacity 
    //   onPress={onPress}
    //   style={{
    //     backgroundColor: customStyle?.backgroundColor ?? 'transparent',
    //     borderRadius: customStyle?.borderRadius ?? 0,
    //     borderColor: customStyle?.borderBlockColor ?? 'transparent',
    //     borderWidth: customStyle?.borderWidth ?? 0,
    //     paddingLeft: 16,
    //     paddingTop: 12,
    //     paddingRight: 16,
    //     paddingBottom: 12,
    //     alignItems: 'center',
    //     flex: 1,
    //     marginBottom: 12,
    //   }}>

    //   <View
    //     style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start'}}>

    //     <View style={{width: 50}}>
    //       <TokenLogo
    //         tokenName={userToken.name}
    //         logoUri={userToken.logo}
    //         size={42}
    //         borderRadius={42}
    //         backgroundColor="blue"
    //         textFontSize={12}></TokenLogo>
    //     </View>
    //     <View
    //       style={{
    //         flex: 1,
    //         flexDirection: 'row',
    //         justifyContent: 'space-between',
    //         alignItems: 'center',
    //       }}>
    //       <View
    //         style={{
    //           flex: 1,
    //           flexDirection: 'column',
    //           justifyContent: 'center',
    //           alignItems: 'flex-start',
    //         }}>
    //         <Text
    //           style={{color: primaryColor2, fontSize: 16, fontWeight: '500'}}>
    //           {userToken.name}
    //         </Text>
    //         <Text style={{color: secondaryColor, fontSize: 12}}>
    //           {userToken.symbol}
    //         </Text>
    //       </View>
    //       <View
    //         style={{
    //           flex: 1,
    //           flexDirection: 'column',
    //           justifyContent: 'center',
    //           alignItems: 'flex-end',
    //         }}>
    //         <Text
    //           style={{color: primaryColor2, fontSize: 16, fontWeight: '500'}}>
    //           {handleTokenValue()}
    //         </Text>
    //         <Text style={{color: secondaryColor, fontSize: 12}}>
    //           {formatNumber(userToken.uiAmount!, 2, 6)}
    //         </Text>
    //       </View>
    //     </View>
    //   </View>

    // </TouchableOpacity>

    <View style={{flex: 1, flexDirection: 'column'}}>
      {userTokens.map((token, index) => (
        <TouchableOpacity
          onPress={onPress}
          style={{
            backgroundColor: customStyle?.backgroundColor ?? 'transparent',
            borderRadius: customStyle?.borderRadius ?? 0,
            borderColor: customStyle?.borderBlockColor ?? 'transparent',
            borderWidth: customStyle?.borderWidth ?? 0,
            paddingLeft: 16,
            paddingTop: 12,
            paddingRight: 16,
            paddingBottom: 12,
            alignItems: 'center',
            flex: 1,
            marginBottom: 12,
          }}>
          <View
            key={index}
            style={{
              flex: 1,
              flexDirection: 'row',
              justifyContent: 'flex-start',
            }}>
            <View style={{width: 50}}>
              <TokenLogo
                tokenName={token.name}
                logoUri={token.logo}
                size={42}
                borderRadius={42}
                backgroundColor="blue"
                textFontSize={12}
              />
            </View>
            <View
              style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}>
              <View
                style={{
                  flex: 1,
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'flex-start',
                }}>
                <Text
                  style={{
                    color: primaryColor2,
                    fontSize: 16,
                    fontWeight: '500',
                  }}>
                  {token.name}
                </Text>
                <Text style={{color: secondaryColor, fontSize: 12}}>
                  {token.symbol}
                </Text>
              </View>
              <View
                style={{
                  flex: 1,
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'flex-end',
                }}>
                {/* 假设 handleTokenValue 是一个接受 token 作为参数的函数 */}
                <Text
                  style={{
                    color: primaryColor2,
                    fontSize: 16,
                    fontWeight: '500',
                  }}>
                  {handleTokenValue()}{' '}
                  {/* 确保这个函数接受 token 并返回正确的值 */}
                </Text>
                <Text style={{color: secondaryColor, fontSize: 12}}>
                  {formatNumber(token.uiAmount!, 2, 6)}
                </Text>
              </View>
            </View>
          </View>
        </TouchableOpacity>
      ))}
    </View>
   );
}
